Quick Start - Configuration
dxchart5-react Configuration
dxchart5-react
has a very strong configuration abilities, most of the time you would need to change it for your needs.
Configuration for dxchart5-react
should be provided via dependencies
. These dependencies consists of some meaningful parts:
- initials
- configs
- providers
Initials
This part of dependencies
is responsible for configuration of the initial
chart appearance and functionality.
It means that every new user will see the chart with exactly this configuration.
Important note: user CAN change this stuff interacting with the app.
Here's the list of available options:
ChartAppInitials
Configs
With these options you can change the UI, localization, palette and other parts of the app.
Important note: user canNOT change this stuff interacting with the app.
Here's the list:
ChartReactAppConfig
The main configuration place for chart-react.
Providers
Providers are aimed to send data to dxchart5-react
and vice-versa such as candles, symbols, user data and so on.
You can learn more about the providers
concept here.
Example
To give you a brief introduction how you can configure the dxchart5-react
let's hide drawings sidebar and enable tooltips for the buttons in the toolbar.
using <ChartReactApp />
react component
For react
based application dependencies
should be passed via react component props:
import React from 'react';import { ChartReactApp } from '@dx-private/dxchart5-react/dist/chart/chart-react-app';import { CREATE_MOCK_PROVIDERS } from '@dx-private/dxchart5-react-mock-providers/dist';export function App() {return (<div className="App" style={{ height: 576, width: 800 }}><ChartReactAppdependencies={{...CREATE_MOCK_PROVIDERS(),chartReactConfig: {drawings: {sidebar: {enabled: false,},},toolbar: {showButtonsTooltip: true,},},// The palette and colorPalette objects support all common color models: hex, rgb/rgba, hsl/hsla, default strings ('green', 'yellow', etc...),// but the most native type for chart is rgba, so it's recommended to use it if possiblecolorPalette: ['rgb(255,255,0)','rgba(0,0,0,1)','#ad00fa','green','hsl(0, 100%, 50%)','hsla(0, 100%, 64%, 0.2)',],initialChartConfig: {components: {crossTool: {// crosstool supports three types: 'cross-and-labels', 'only-labels' and 'none'type: 'cross-and-labels',},},},}}/></div>);}
using createChart
function
If you use createChart
function to render dxchart5-react
app, it's easy to pass the dependencies
too:
import { createChart } from '@dx-private/dxchart5-react/dist/index';import { CREATE_MOCK_PROVIDERS } from '@dx-private/dxchart5-react-mock-providers/dist';// append container somewhere in your appconst container = document.createElement('dxcharts-container');createChart(container, {dependencies: {...CREATE_MOCK_PROVIDERS(),chartReactConfig: {drawings: {sidebar: {enabled: false,},},toolbar: {showButtonsTooltip: true,},},// The palette and colorPalette objects support all common color models: hex, rgb/rgba, hsl/hsla, default strings ('green', 'yellow', etc...),// but the most native for chart is rgba, so it's recommended to use it if possiblecolorPalette: ['rgb(255,255,0)','rgba(0,0,0,1)','#ad00fa','green','hsl(0, 100%, 50%)','hsla(0, 100%, 64%, 0.2)',],initialChartConfig: {components: {crossTool: {// crosstool supports three types: 'cross-and-labels', 'only-labels' and 'none'type: 'cross-and-labels',},},},},});
With this example you should see the following: